<template>
  <view class="content">
    <view class="fff inbox">
      <u-input
        v-model="info.bname"
        type="text"
        :border="border"
        height="90"
        placeholder="请输入门店名称"
        :clearable="false" />
    </view>
    <view class="fff inbox">
      <u-input
        v-model="info.uname"
        type="text"
        :border="border"
        height="90"
        placeholder="请输入客户姓名（或者尊称）"
        :clearable="false" />
    </view>
    <view class="fff inbox">
      <u-input
        v-model="info.phone"
        type="text"
        :border="border"
        height="90"
        placeholder="请输入电话号码"
        :clearable="false" />
    </view>
    <view class="fff inbox ">
      <u-input
        v-model="info.mark_name"
        type="select"
        @click="markShowThis"
        :border="border"
        height="90"
        placeholder="请选择超市规模"
        :clearable="false" />
    </view>
    <!-- <u-action-sheet :list="marks" :tips="tips" height="600" v-model="markShow" @click="onmarkSheet" :safe-area-inset-bottom="true"></u-action-sheet> -->
    <u-select
      v-model="markShow"
      @confirm="onmarkSheet"
      title="请选择超市规模"
      :list="marks">
    </u-select>
    <view class="fff inbox">
      <u-input
        v-model="info.deal_name"
        @click="dealShowThis"
        type="select"
        :border="border"
        height="90"
        placeholder="请选择是否成交"
        :clearable="false" />
    </view>
    <u-action-sheet
      :list="deal"
      :tips="tipsDeal"
      v-model="dealShow"
      @click="dealSheet"
      :safe-area-inset-bottom="true">
    </u-action-sheet>

    <view class="fff inbox">
      <u-input
        v-model="info.old_name"
        @click="oldShowThis"
        type="select"
        :border="border"
        height="90"
        placeholder="请选择是否是老客户"
        :clearable="false" />
    </view>
    <u-action-sheet
      :list="olds"
      :tips="tipsOld"
      v-model="oldShow"
      @click="oldSheet"
      :safe-area-inset-bottom="true">
    </u-action-sheet>

    <view class="fff inbox">
      <view class="x-row"
        @click="selectLoaction">
        <input
          v-model="info.map_address"
          placeholder="请选择地址"
          style="height: 90rpx;"
          disabled="true"
          class="x-col whiteBg"
          type="text"
          :border="border"
          height="90"
          :clearable="false" />
        <view
          class="iconfont iconyou x-col-center">

        </view>
      </view>

      <view class="borderbox">
      </view>
      <view
        style="height: 15upx;">
      </view>
      <input
        v-model="info.street"
        style="height: 90rpx;"
        type="textarea"
        :border="border"
        height="90"
        placeholder="详细地址（镇街道）"
        :clearable="false" />
    </view>
    <view
      class="fff inbox inbox2 x-row"
      v-if="info.is_old">
      <view
        class="x-col-center nameop"
        @click="selectGood">
        销售产品</view>
      <view class="x-col">
        <u-input
          v-model="goodName"
          type="text"
          @click="selectGood"
          disabled="true"
          :border="border"
          height="90"
          placeholder="请选择"
          style="text-align: right;" />

      </view>
      <u-icon
        name="arrow-right"
        @click="selectGood"
        color="#999"
        size="32rpx"
        style="margin-left: 15upx;">
      </u-icon>
    </view>
    <view
      class="inbox inbox3">
      <view
        class="x-col-center nameop"
        style="padding-left: 5upx;">
        拍照上传商家门头照片</view>
      <view class="upimg">
        <u-upload
          ref="uUpload"
          max-count="1"
          name="file"
          :action="action"
          :auto-upload="true">
        </u-upload>
      </view>
    </view>
    <view class="whiteBg"
      v-if="info.is_old">
      <view class="x-row"
        style="padding: 25upx 0; "
        @click="add_ontime">
        <view class="x-col">
        </view>
        <image
          src="../../static/addicon.png"
          class="imgadd x-col-center">
        </image>
        <view
          class="bu_text x-col-center">
          添加老客户未结清账单</view>
        <view class="x-col">
        </view>
      </view>
      <view
        v-for="(item,index) in formdata"
        :key="index">
        <view
          class="nametext">
          未结清账单{{index+1}}
          <text class="fr"
            @click="delsdit(index)">删除</text>
        </view>
        <view
          class="listshow x-row">
          <view
            class="leftyext">
            账单金额</view>
          <input
            v-model="item.price"
            placeholder="请输入账单金额"
            type="digit"
            class="x-col rghtb x-col-center"></input>
        </view>

        <view
          class="listshow x-row">
          <view
            class="leftyext">
            备注</view>
          <view
            class="x-col x-col-center rghtb">
            <input
              v-model="item.content"
              placeholder="请输入账单备注信息"
              class="x-col rghtb"></input>
          </view>
        </view>
        <view
          class="listshow x-row"
          style="border-bottom: none;">
          <view
            class="leftyext">
            账单图片</view>
        </view>
        <view
          class="listshow">

          <u-upload
            ref="zUpload"
            max-count="1"
            @on-uploaded="uploadedImg"
            @on-remove="removeImg"
            :index='index'
            name="file"
            :action="action"
            :auto-upload="true">
          </u-upload>

        </view>
      </view>

    </view>
    <view class="inbox fff">
      <view
        class="x-col-center nameop nameop25">
        促销情况</view>
      <u-input
        v-model="info.sales_promotion"
        type="textarea"
        :border="border"
        height="180"
        placeholder="请输入内容"
        :clearable="false" />
    </view>
    <view class="inbox fff">
      <view
        class="x-col-center nameop nameop25">
        客户分析</view>
      <u-input
        v-model="info.analysis"
        type="textarea"
        :border="border"
        height="180"
        placeholder="请输入内容"
        :clearable="false" />
    </view>
    <view class="inbox fff">
      <view
        class="x-col-center nameop nameop25">
        备注</view>
      <u-input
        v-model="info.remarks"
        type="textarea"
        :border="border"
        height="180"
        placeholder="请输入内容"
        :clearable="false" />
    </view>
    <view class="button"
      @click="gotoAdd">添加客户
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      action: '',
      markShow: false,
      dealShow: false,
      oldShow: false,
      weizhi: '商家位置',
      tips: {
        text: '请选择超市规模',
        color: '#999999',
        fontSize: 30
      },
      tipsDeal: {
        text: '是否成交',
        color: '#999999',
        fontSize: 30
      },
      tipsOld: {
        text: '是否是老客户',
        color: '#999999',
        fontSize: 30
      },

      info: {
        bname: '',
        uname: '',
        phone: '',
        mark_id: '',
        mark_name: '',
        is_old: '',
        is_deal: '',
        deal_name: '',
        old_name: '',
        avatar: '',
        lat: '',
        lon: '',
        street: '',
        map_address: '',
        address: '',

        sales_promotion: '',
        analysis: '',
        remarks: '',
        goods: []
      },
      marks: [],
      deal: [
        {
          type: 0,
          text: '未成交'
        },
        {
          type: 1,
          text: '已成交'
        }
      ],
      olds: [
        {
          type: 0,
          text: '不是'
        },
        {
          type: 1,
          text: '是'
        }
      ],

      debt: '',
      goodName: '',
      formdata: [
        {
          content: '',
          price: '',
          img: '',
          img_src: ''
        }
      ], //未结清账单

      action: this.urlimg + 'api/Upload/upfile'
    }
  },
  onLoad() {
    this.getMark()
  },
  onShow() {
    if (getApp().globalData.addCusGoodLi) {
      this.info.goods = getApp().globalData.addCusGoodLi
      this.goodName = this.info.goods.length + '件商品'
    }
  },
  methods: {
    gotoAdd() {
      let that = this,
        txt = '',
        info = this.info
      if (!info.bname) txt = '请输入门店名称'
      else if (!info.uname) txt = '请输入客户姓名'
      else if (!info.phone) txt = '请输入电话号码'
      else if (!info.mark_id) txt = '请选择超市规模'
      else if (info.is_deal === '') txt = '请选择是否成交'
      else if (info.is_old === '') txt = '请选择是否是老客户'
      else if (!info.map_address) txt = '请输入选择地址'
      else if (this.$refs.uUpload.lists.length == 0) txt = '拍照上传商家门头照片'
      else if (!info.sales_promotion) txt = '请输入促销情况'
      else if (!info.analysis) txt = '请输入客户分析'

      if (txt) {
        uni.showToast({
          title: txt,
          icon: 'none'
        })
        return
      }
      if (info.is_old) {
        let isReturn = false
        for (let i in this.formdata) {
          if (!this.formdata[i].price) {
            uni.showToast({
              title: '请输入账单' + (parseInt(i) + 1) + '金额',
              icon: 'none'
            })
            isReturn = true
            break
          }
          if (!this.formdata[i].img) {
            uni.showToast({
              title: '请上传账单' + (parseInt(i) + 1) + '金额',
              icon: 'none'
            })
            isReturn = true
            break
          }
        }
        if (isReturn) {
          return
        }
        info.debt = JSON.stringify(this.formdata)
      }
      info.goods = JSON.stringify(info.goods)
      info.avatar = this.$refs.uUpload.lists[0].response.result.id
      // business/addBusiness 添加客户
      this.$axios('business/addBusiness', info).then(res => {
        uni.showModal({
          title: '添加成功',
          content: '主页-我的客户查看新增客户',
          showCancel: false,
          success(e) {
            uni.navigateBack({})
          }
        })
      })
    },
    uploadedImg(e, i) {
      //
      this.formdata[i].img = e[0].response.result.id
    },
    removeImg(e, li, i) {
      //
      this.formdata[i].img = ''
    },
    add_ontime() {
      this.formdata.unshift({
        content: '',
        price: '',
        img: '',
        img_src: ''
      })
    },
    //删除
    delsdit(index) {
      if (this.formdata.length > 1) {
        console.log(1)
        this.formdata.splice(index, 1)
      }
    },
    selectGood() {
      this.$api.navigator('goodSelect?action=all&&sore=add&isOld=' + this.info.is_old)
    },
    selectLoaction() {
      let that = this
      this.$api.getUserLoacation(function () {
        uni.chooseLocation({
          success: function (res) {
            console.log('位置名称：' + res.name)
            console.log('详细地址：' + res.address)
            that.info.map_address = res.address
            that.info.lat = res.latitude
            that.info.lon = res.longitude
            // that.$axios.getLoactionAddress(res.latitude,res.longitude,function(e){
            // 	that.info.lat=res.latitude;
            // 	that.info.lon=res.longitude;
            // 	that.info.address=e;
            // })
          }
        })
      })
    },
    markShowThis() {
      this.markShow = true
    },
    dealShowThis() {
      this.dealShow = true
    },
    oldShowThis() {
      this.oldShow = true
    },

    getMark() {
      let that = this
      this.$axios('index/config', {}).then(res => {
        let m = []
        for (let i in res.result.mark) {
          m.push({
            value: res.result.mark[i].id,
            label: res.result.mark[i].mark + '㎡'
          })
        }
        that.marks = m
      })
    },
    onmarkSheet(idx) {
      //
      this.info.mark_id = idx[0].value
      this.info.mark_name = '规模：' + idx[0].label
    },
    dealSheet(i) {
      this.info.is_deal = this.deal[i].type
      this.info.deal_name = this.deal[i].type == 1 ? '已成交' : '未成交'
    },
    oldSheet(i) {
      this.info.is_old = this.olds[i].type
      this.info.old_name = this.olds[i].type == 1 ? '是老客户' : '不是老客户'
    }
  }
}
</script>

<style>
page {
  background: #f8f8f8;
  padding: 32upx;
  padding-top: 0;
  box-sizing: border-box;
}

.nametext {
  color: #666;
  font-size: 24upx;
  padding: 0 32upx;
  line-height: 80upx;
  background: #f4fcff;
}

.listshow {
  padding: 0 32upx;
  line-height: 112upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.leftyext {
  width: 150upx;
  color: #333;
  font-size: 28upx;
}

.rghtb {
  color: #666;
}

.textares {
  padding-bottom: 20upx;
  color: #666;
  line-height: 40upx;
  margin-top: -15upx;
}

.imgadd {
  width: 26upx;
  height: 26upx;
  display: block;
}

.bu_text {
  color: #2b88fe;
  font-size: 28upx;
  padding-left: 10upx;
}

.inbox {
  padding: 0 25upx;
  margin-top: 32upx;
  border-radius: 16upx;
  overflow: hidden;
  position: relative;
}

.borderbox {
  height: 1px;
  background: rgba(0, 0, 0, 0.09);
  width: 96%;
  position: absolute;
  right: 0;
}

/deep/.inbox2 .u-input__input {
  text-align: right;
}

.inbox3 {
  padding-left: 0;
}

.nameop {
  color: #34404a;
  font-size: 30upx;
}

.upimg {
  padding-top: 10upx;
}

/deep/.upimg .u-list-item {
  border: 1px dashed #d1d1d1;
  background: none;
}

.nameop25 {
  padding: 25upx 0;
  padding-bottom: 10upx;
}

.button {
  width: 654upx;
  height: 84upx;
  background: #2b88fe;
  border-radius: 8upx;
  position: relative;
  bottom: 0;
  margin-top: 30upx;
  left: 50%;
  transform: translateX(-50%);
  line-height: 84upx;
  color: #fff;
  text-align: center;
  font-size: 32upx;
}
</style>
